<template>
  <div class="singer-album">
    <div class="album-slide">
      <div class="singer-img">
        <img :src="attachImageUrl(singer.pic)">
      </div>
      <ul class="info">
        <li v-if="singer.sex==0||singer.sex==1">{{attachSex(singer.sex)}}</li>
        <li>生日：{{attachBirth(singer.birth)}}</li>
        <li>故乡：{{singer.location}}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="intro">
        <h2>{{singer.name}}</h2>
        <span>{{singer.introduction}}</span>
      </div>
      <div class="content">
        <album-content :song-list="listOfSongs">
          <template slot="title">歌单</template>
        </album-content>
      </div>
    </div>
  </div>
</template>

<script>
  import {mixin} from '../mixins'
  import {mapGetters} from 'vuex'
  import {loginIn, songOfSingerId} from '../api/index'
  import AlbumContent from '../components/AlbumContent'

  export default {
    name: 'singer-album',
    mixins: [mixin],
    components: {
      AlbumContent,
      Comment
    },
    data () {
      return {
        singerId: '',
        singer: {},

      }
    },
    computed: {
      ...mapGetters([
        'listOfSongs',
        'tempList',
        'loginIn',
        'userId',
      ])
    },
    created () {
      this.singerId = this.$route.params.id
      this.singer = this.tempList
      this.getSongOfSingerId()
    },
    methods: {
      getSongOfSingerId () {
        songOfSingerId(this.singerId)
          .then(res => {
            this.$store.commit('setListOfSongs', res)
          })
          .catch(err => {
            console.log(err)
          })
      },
      //获取性别
      attachSex (value) {
        if (value == 0) {
          return '女'
        } else if (value == 1) {
          return '男'
        }
        return ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/singer-album.scss";
</style>
